<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <div>
                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
                </div>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                    <a class="ml-1 text-primary-500">Fuse Components</a>
                </div>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                    <span class="ml-1 text-secondary">Components</span>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    Navigation
                </h2>
            </div>
        </div>
        <button
            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
            mat-icon-button
            (click)="toggleDrawer()">
            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
        </button>
    </div>

    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">

        <p>
            <strong>fuse-navigation</strong> is a set of components for creating navigations from data. It has two different variations; <strong>fuse-vertical-navigation</strong>
            for creating vertical and <strong>fuse-horizontal-navigation</strong> for creating horizontal navigations.
        </p>
        <p>
            The <em>vertical</em> navigation comes with built-in drawer that can be programmed in various ways to show the navigation in different styles and to control the
            mobile behavior.
        </p>
        <p>
            <strong>fuse-navigation</strong> also provides a service which can be used to store navigation data as well as accessing navigation items with their ids from the
            navigation data. It's a utility service, you don't have to use it to make <strong>fuse-navigation</strong> work.
        </p>
        <p>
            <strong>Exported as: </strong><code>fuseVerticalNavigation</code> and <code>fuseHorizontalNavigation</code>
        </p>

        <fuse-alert
            [appearance]="'border'"
            [type]="'info'">
            fuse-navigation designed to work with data and it must be supplied in certain format. If you want to create a navigation from an HTML structure,
            this component is not for you.
        </fuse-alert>

        <h2>Module</h2>
        <!-- @formatter:off -->
        <textarea
            fuse-highlight
            lang="typescript">
            import { FuseVerticalNavigationModule } from '@fuse/components/navigation';
            import { FuseHorizontalNavigationModule } from '@fuse/components/navigation';
        </textarea>
        <!-- @formatter:on -->

        <h2>Navigation item</h2>
        <p>
            This is the interface of the <em>Navigation item</em>. Both <em>vertical</em> and <em>horizontal</em> navigation items use the same interface:
        </p>
        <!-- @formatter:off -->
        <textarea fuse-highlight
                  lang="typescript">
            export interface FuseNavigationItem
            {
                id?: string;
                title?: string;
                subtitle?: string;
                type:
                    | 'aside'
                    | 'basic'
                    | 'collapsable'
                    | 'divider'
                    | 'group'
                    | 'spacer';
                hidden?: (item: FuseNavigationItem) => boolean;
                active?: boolean;
                disabled?: boolean;
                tooltip?: string;
                link?: string;
                externalLink?: boolean;
                target?:
                    | '_blank'
                    | '_self'
                    | '_parent'
                    | '_top'
                    | string;
                exactMatch?: boolean;
                isActiveMatchOptions?: IsActiveMatchOptions;
                function?: (item: FuseNavigationItem) => void;
                classes?: {
                    title?: string;
                    subtitle?: string;
                    icon?: string;
                    wrapper?: string;
                };
                icon?: string;
                badge?: {
                    title?: string;
                    classes?: string;
                };
                children?: FuseNavigationItem[];
                meta?: any;
            }
        </textarea>
        <!-- @formatter:on -->
        <div class="bg-card py-3 px-6 mt-2 rounded shadow">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>id</div>
                        </td>
                        <td>
                            Unique id of the navigation item. It's important to supply navigation items with ids if you want to access and modify them after generating the
                            navigation.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>title</div>
                        </td>
                        <td>
                            Title of the navigation item.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>subtitle</div>
                        </td>
                        <td>
                            Subtitle of the navigation item.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>type</div>
                        </td>
                        <td>
                            Type of the navigation item.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>hidden</div>
                        </td>
                        <td>
                            A function that returns a boolean. It gets one parameter which is the navigation item. Returning <code>true</code> from the function will hide the
                            item and <code>false</code> will show it.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>active</div>
                        </td>
                        <td>
                            Whether to force the navigation item to be active.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>disabled</div>
                        </td>
                        <td>
                            Whether the navigation item is disabled.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>tooltip</div>
                        </td>
                        <td>
                            Tooltip to show on item hover. Empty string will remove the tooltip.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>link</div>
                        </td>
                        <td>
                            String representation of the item link. It can be either a <em>router</em> link or a normal, outgoing link.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>externalLink</div>
                        </td>
                        <td>
                            Whether the supplied link should be parsed as an external link. It must be <strong>true</strong> if you supply a normal, outgoing link in the
                            <strong>link</strong> property.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>target</div>
                        </td>
                        <td>
                            Sets the <em>target</em> attribute of the external, outgoing link.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>exactMatch</div>
                        </td>
                        <td>
                            Sets the <em>exact</em> parameter on the <em>[routerLinkActiveOptions]</em>.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>isActiveMatchOptions</div>
                        </td>
                        <td>
                            Sets the <em>isActiveMatchOptions</em> object on the <em>[routerLinkActiveOptions]</em>. If provided, <em>exactMatch</em> option will be
                            ignored.
                            <a
                                href="https://angular.io/api/router/IsActiveMatchOptions"
                                target="_blank"
                                rel="noreferrer">https://angular.io/api/router/IsActiveMatchOptions
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>function</div>
                        </td>
                        <td>
                            A function to run on navigation item click. It gets one parameter which is the navigation item. Supplying function will <strong>NOT</strong>
                            override the link functionality of the navigation item, they will run in parallel.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>classes</div>
                        </td>
                        <td>
                            Custom class names for the navigation item's specific parts. Multiple class names can be added by separating them with whitespace:
                            <code>'class1 class2 class3'</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>icon</div>
                        </td>
                        <td>
                            Icon name for the navigation item.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>badge.title</div>
                        </td>
                        <td>
                            Title of the badge.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>badge.classes</div>
                        </td>
                        <td>
                            Classes to add to the badge. This can be used to customize the look of the badge.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>children</div>
                        </td>
                        <td>
                            Array of navigation items to create child items.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>meta</div>
                        </td>
                        <td>
                            An object to hold custom data for the navigation item. It can be used for anything such as storing the access role and authorization of the
                            navigation item.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h2>Vertical navigation</h2>
        <h3>Usage</h3>
        <p>
            Here's the basic usage of the <code>fuse-vertical-navigation</code>:
        </p>
        <!-- @formatter:off -->
        <textarea
            fuse-highlight
            lang="html">
            <fuse-vertical-navigation
                [appearance]="'classic'"
                [autoCollapse]="true"
                [inner]="false"
                [mode]="isScreenSmall ? 'over' : 'side'"
                [name]="'leftNavigation'"
                [navigation]="navigationData"
                [opened]="!isScreenSmall"
                [position]="'left'"
                [transparentOverlay]="false">
            </fuse-vertical-navigation>
        </textarea>
        <!-- @formatter:on -->

        <h3>Properties</h3>
        <div class="bg-card py-3 px-6 rounded shadow">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Default</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Input()</div>
                            <div>appearance: FuseVerticalNavigationAppearance</div>
                        </td>
                        <td>
                            Appearance of the navigation and its drawer. This is a string type and can be used to override the style of the navigation.
                        </td>
                        <td>
                            <code class="whitespace-nowrap">classic</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Input()</div>
                            <div>autoCollapse: boolean</div>
                        </td>
                        <td>
                            Whether expanding an expandable navigation item should close other expanded items excluding the active menu item's parent.
                        </td>
                        <td>
                            <code class="whitespace-nowrap">true</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Input()</div>
                            <div>inner: boolean</div>
                        </td>
                        <td>
                            Whether the inner mode is active. This mode allows using navigation without its drawer. Suitable for using it inside <strong>mat-sidenav</strong>
                            or <strong>mat-drawer</strong>.
                        </td>
                        <td>
                            <code class="whitespace-nowrap">false</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Input()</div>
                            <div>mode: FuseVerticalNavigationMode</div>
                        </td>
                        <td>
                            <strong>over</strong> mode can be used to place the drawer on top of the content and <strong>side</strong> mode can be used to push the content and
                            place the drawer next to it.
                        </td>
                        <td>
                            <code class="whitespace-nowrap">side</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div class="mb-2"><code class="text-xs font-bold">REQUIRED</code></div>
                            <div>@Input()</div>
                            <div>name: string</div>
                        </td>
                        <td>
                            Unique name of the navigation. Required for navigation and its drawer to work correctly.
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Input()</div>
                            <div>navigation: FuseNavigationItem[]</div>
                        </td>
                        <td>
                            Array of navigation items to build the navigation from.
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Input()</div>
                            <div>opened: boolean</div>
                        </td>
                        <td>
                            Whether the navigation drawer is opened. Only works with <strong>over</strong> mode.
                        </td>
                        <td>
                            <code class="whitespace-nowrap">false</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Input()</div>
                            <div>position: FuseVerticalNavigationPosition</div>
                        </td>
                        <td>
                            Position of the drawer.
                        </td>
                        <td>
                            <code class="whitespace-nowrap">left</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Input()</div>
                            <div>transparentOverlay: boolean</div>
                        </td>
                        <td>
                            Whether the overlay of the drawer is transparent. Only works with <strong>over</strong> mode.
                        </td>
                        <td>
                            <code class="whitespace-nowrap">false</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Output()</div>
                            <div>appearanceChanged: FuseVerticalNavigationAppearance</div>
                        </td>
                        <td>
                            An event emitted after the appearance of the navigation changed.
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Output()</div>
                            <div>modeChanged: FuseVerticalNavigationMode</div>
                        </td>
                        <td>
                            An event emitted after the mode of the navigation changed.
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Output()</div>
                            <div>openedChanged: boolean</div>
                        </td>
                        <td>
                            An event emitted after the opened status of the navigation changed.
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Output()</div>
                            <div>positionChanged: FuseVerticalNavigationPosition</div>
                        </td>
                        <td>
                            An event emitted after the position of the navigation changed.
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h3>Custom content hooks</h3>
        <p>
            Since the entire navigation will be created from the supplied navigation data, it's only possible to attach custom content inside the navigation drawer using custom
            content hooks. There are four of these hooks;
        </p>
        <div class="bg-card py-3 px-6 mt-4 rounded shadow">
            <table>
                <thead>
                    <tr>
                        <th>Hook</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>fuseVerticalNavigationHeader</div>
                        </td>
                        <td>
                            Fixed header hook. Anything put inside this hook will not scroll with drawer content.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>fuseVerticalNavigationContentHeader</div>
                        </td>
                        <td>
                            Header hook. Anything put inside this hook will be scrolled with the drawer content.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>fuseVerticalNavigationFooter</div>
                        </td>
                        <td>
                            Fixed footer hook. Anything put inside this hook will not scroll with drawer content.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>fuseVerticalNavigationContentFooter</div>
                        </td>
                        <td>
                            Footer hook. Anything put inside this hook will be scrolled with the drawer content.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- @formatter:off -->
        <textarea
            fuse-highlight
            lang="html">
            <!-- Navigation -->
            <fuse-vertical-navigation>

                <div fuseVerticalNavigationHeader>
                    At the top, fixed into position.
                </div>

                <div fuseVerticalNavigationContentHeader>
                    At the top, scrolls with the content.
                </div>

                <div fuseVerticalNavigationContentFooter>
                    At the bottom, scrolls with the content.
                </div>

                <div fuseVerticalNavigationFooter>
                    At the bottom, fixed into position.
                </div>

            </fuse-vertical-navigation>
        </textarea>
        <!-- @formatter:on -->

        <h3>Type aliases</h3>
        <!-- @formatter:off -->
        <textarea
            fuse-highlight
            lang="typescript">
            export type FuseVerticalNavigationAppearance =
                | 'default'
                | 'compact'
                | 'dense'
                | 'futuristic'
                | 'thin'
                | string;
        </textarea>
        <textarea
            fuse-highlight
            lang="typescript">
            export type FuseVerticalNavigationMode =
                | 'over'
                | 'side';
        </textarea>
        <textarea
            fuse-highlight
            lang="typescript">
            export type FuseVerticalNavigationPosition =
                | 'left'
                | 'right';
        </textarea>
        <!-- @formatter:on -->

        <h2>Horizontal navigation</h2>
        <h3>Usage</h3>
        <p>
            Here's the basic usage of the <code>fuse-horizontal-navigation</code>:
        </p>
        <!-- @formatter:off -->
        <textarea
            fuse-highlight
            lang="html">
            <fuse-horizontal-navigation
                [name]="'topNavigation'"
                [navigation]="navigationData">
            </fuse-horizontal-navigation>
        </textarea>
        <!-- @formatter:on -->

        <h3>Properties</h3>
        <div class="bg-card py-3 px-6 rounded shadow">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Default</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div class="mb-2"><code class="text-xs font-bold">REQUIRED</code></div>
                            <div>@Input()</div>
                            <div>name: string</div>
                        </td>
                        <td>
                            Unique name of the navigation. Required for navigation and its drawer to work correctly.
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>@Input()</div>
                            <div>navigation: FuseNavigationItem[]</div>
                        </td>
                        <td>
                            Array of navigation items to build the navigation from.
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h2>Accessing navigation items</h2>
        <p>
            The <code>FuseNavigationService</code> provides couple helper methods to access navigation items from the navigation data using their ids. This is especially useful
            if you want to change something from any item like updating its badge title, hiding or disabling it.
        </p>
        <div class="example-viewer">

            <div class="title">
                <h6>Example</h6>
            </div>

            <mat-tab-group [animationDuration]="'0ms'">

                <mat-tab label="Preview">

                    <ng-template matTabContent>

                        <button
                            mat-flat-button
                            [color]="'primary'"
                            (click)="getNavItem('documentation.changelog', 'mainNavigation');">
                            Get the Changelog item (See browser console)
                        </button>

                    </ng-template>

                </mat-tab>

                <mat-tab label="HTML">

                    <!-- @formatter:off -->
                    <textarea
                        fuse-highlight
                        [lang]="'html'">
                        <button
                            mat-flat-button
                            [color]="'primary'"
                            (click)="getNavItem('documentation.changelog', 'mainNavigation');">
                            Get the Changelog item (See browser console)
                        </button>
                    </textarea>
                    <!-- @formatter:on -->

                </mat-tab>

                <mat-tab label="Typescript">

                    <!-- @formatter:off -->
                    <textarea fuse-highlight
                              [lang]="'typescript'">

                        /**
                         * Get navigation item
                         *
                         * @param itemId
                         * @param navigationName
                         */
                        getNavItem(itemId, navigationName): FuseNavigationItem | null
                        {
                            // Get the component -> navigation data -> item
                            const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName);

                            // Return if the navigation component does not exist
                            if ( !navComponent )
                            {
                                return null;
                            }

                            // Get the navigation item
                            const navigation = navComponent.navigation;
                            const item = this._fuseNavigationService.getItem(itemId, navigation);
                            console.log(item);
                            return item;
                        }

                    </textarea>
                    <!-- @formatter:on -->

                </mat-tab>

            </mat-tab-group>

        </div>

        <h2>Modifying navigation items</h2>
        <p>
            After accessing a navigation item, you can simply modify the object and then call the <code>refresh()</code> method on the <em>Navigation component</em> to
            apply the changes.
        </p>
        <div class="example-viewer">

            <div class="title">
                <h6>Change badge title</h6>
            </div>

            <mat-tab-group [animationDuration]="'0ms'">

                <mat-tab label="Preview">

                    <ng-template matTabContent>

                        <button
                            mat-flat-button
                            [color]="'primary'"
                            (click)="updateBadgeTitle('documentation.changelog', 'mainNavigation', '9.9.99');">
                            Update the 'Changelog' badge title
                        </button>

                    </ng-template>

                </mat-tab>

                <mat-tab label="HTML">

                    <!-- @formatter:off -->
                    <textarea
                        fuse-highlight
                        [lang]="'html'">
                        <button
                            mat-flat-button
                            [color]="'primary'"
                            (click)="updateBadgeTitle('documentation.changelog', 'mainNavigation', '9.9.99');">
                            Update the 'Changelog' badge title
                        </button>
                    </textarea>
                    <!-- @formatter:on -->

                </mat-tab>

                <mat-tab label="Typescript">

                    <!-- @formatter:off -->
                    <textarea fuse-highlight
                              [lang]="'typescript'">

                        /**
                         * Update badge title
                         *
                         * @param itemId
                         * @param navigationName
                         * @param title
                         */
                        updateBadgeTitle(itemId, navigationName, title): void
                        {
                            // Get the component -> navigation data -> item
                            const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName);

                            // Return if the navigation component does not exist
                            if ( !navComponent )
                            {
                                return null;
                            }

                            // Get the navigation item, update the badge and refresh the component
                            const navigation = navComponent.navigation;
                            const item = this._fuseNavigationService.getItem(itemId, navigation);
                            item.badge.title = title;
                            navComponent.refresh();
                        }

                    </textarea>
                    <!-- @formatter:on -->

                </mat-tab>

            </mat-tab-group>

        </div>
        <div class="example-viewer">

            <div class="title">
                <h6>Disable/Enable navigation item</h6>
            </div>

            <mat-tab-group [animationDuration]="'0ms'">

                <mat-tab label="Preview">

                    <ng-template matTabContent>

                        <button
                            mat-flat-button
                            [color]="'primary'"
                            (click)="toggleDisabled('documentation.changelog', 'mainNavigation');">
                            Toggle the disabled status of 'Changelog' item
                        </button>

                    </ng-template>

                </mat-tab>

                <mat-tab label="HTML">

                    <!-- @formatter:off -->
                    <textarea
                        fuse-highlight
                        [lang]="'html'">
                        <button
                            mat-flat-button
                            [color]="'primary'"
                            (click)="toggleDisabled('documentation.changelog', 'mainNavigation');">
                            Toggle the disabled status of 'Changelog' item
                        </button>
                    </textarea>
                    <!-- @formatter:on -->

                </mat-tab>

                <mat-tab label="Typescript">

                    <!-- @formatter:off -->
                    <textarea fuse-highlight
                              [lang]="'typescript'">

                        /**
                         * Toggle disabled status
                         *
                         * @param itemId
                         * @param navigationName
                         */
                        toggleDisabled(itemId, navigationName): void
                        {
                            // Get the component -> navigation data -> item
                            const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName);

                            // Return if the navigation component does not exist
                            if ( !navComponent )
                            {
                                return null;
                            }

                            // Get the navigation item, update the badge and refresh the component
                            const navigation = navComponent.navigation;
                            const item = this._fuseNavigationService.getItem(itemId, navigation);
                            item.disabled = !item.disabled;
                            navComponent.refresh();
                        }

                    </textarea>
                    <!-- @formatter:on -->

                </mat-tab>

            </mat-tab-group>

        </div>

        <h2>Swapping entire navigation</h2>
        <p>
            Sometimes it's best to use more than one set of data and swap between them to provide correct navigation. An example use case would be user roles. Different roles
            may require access to different areas and rather than showing/hiding individual navigation items, it's best to swap the entire navigation data to show a
            personalized navigation for that role.
        </p>
        <div class="example-viewer">

            <div class="title">
                <h6>Swap the entire navigation data</h6>
            </div>

            <mat-tab-group [animationDuration]="'0ms'">

                <mat-tab label="Preview">

                    <ng-template matTabContent>

                        <fuse-alert
                            appearance="outline"
                            type="info">
                            Reload the page to load the default navigation!
                        </fuse-alert>
                        <button
                            class="mt-4"
                            mat-flat-button
                            [color]="'primary'"
                            (click)="swapNavigationData('mainNavigation');">
                            Swap the entire navigation data
                        </button>

                    </ng-template>

                </mat-tab>

                <mat-tab label="HTML">

                    <!-- @formatter:off -->
                    <textarea
                        fuse-highlight
                        [lang]="'html'">
                        <button
                            mat-flat-button
                            [color]="'primary'"
                            (click)="swapNavigationData('mainNavigation');">
                            Swap the entire navigation data
                        </button>
                    </textarea>
                    <!-- @formatter:on -->

                </mat-tab>

                <mat-tab label="Typescript">

                    <!-- @formatter:off -->
                    <textarea fuse-highlight
                              [lang]="'typescript'">

                        /**
                         * Swap navigation data
                         *
                         * @param navigationName
                         */
                        swapNavigationData(navigationName): void
                        {
                            // Get the component -> navigation data -> item
                            const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName);

                            // Return if the navigation component does not exist
                            if ( !navComponent )
                            {
                                return null;
                            }

                            // A navigation data to replace with
                            const newNavigation: FuseNavigationItem[] = [
                                {
                                    id      : 'supported-components',
                                    title   : 'Supported components',
                                    subtitle: 'Compatible third party components',
                                    type    : 'group',
                                    icon    : 'memory',
                                    children: [
                                        {
                                            id   : 'supported-components.apex-charts',
                                            title: 'ApexCharts',
                                            type : 'basic',
                                            icon : 'insert_chart',
                                            link : '/supported-components/apex-charts'
                                        },
                                        {
                                            id   : 'supported-components.full-calendar',
                                            title: 'FullCalendar',
                                            type : 'basic',
                                            icon : 'today',
                                            link : '/supported-components/full-calendar'
                                        },
                                        {
                                            id   : 'supported-components.google-maps',
                                            title: 'Google Maps',
                                            type : 'basic',
                                            icon : 'map',
                                            link : '/supported-components/google-maps'
                                        },
                                        {
                                            id   : 'supported-components.ngx-markdown',
                                            title: 'ngx-markdown',
                                            type : 'basic',
                                            icon : 'text_format',
                                            link : '/supported-components/ngx-markdown'
                                        },
                                        {
                                            id   : 'supported-components.quill-editor',
                                            title: 'Quill editor',
                                            type : 'basic',
                                            icon : 'font_download',
                                            link : '/supported-components/quill-editor'
                                        },
                                        {
                                            id   : 'supported-components.youtube-player',
                                            title: 'Youtube player',
                                            type : 'basic',
                                            icon : 'play_circle_filled',
                                            link : '/supported-components/youtube-player'
                                        }
                                    ]
                                }
                            ];

                            // Replace the navigation data
                            navComponent.navigation = newNavigation;
                            navComponent.refresh();
                        }

                    </textarea>
                    <!-- @formatter:on -->

                </mat-tab>

            </mat-tab-group>

        </div>

    </div>

</div>
